<template>
  <div id='app'>
    <el-container class='app-container'>
      <el-aside width='null' class='app-container-aside'>
        <!-- 菜单导航的开始 -->
        <el-row class='tac'>
          <el-col :span='24'>
            <h5 class='title'>学猿后台管理系统</h5>
            <el-menu
              default-active='2'
              class='el-menu-vertical-demo'
              background-color='#343a40'
              text-color='#fff'
              active-text-color='#ffd04b'
            >
              <el-submenu index='1'>
                <template slot='title'>
                  <i class='el-icon-s-platform'></i>
                  <span>网站管理</span>
                </template>
                <el-menu-item index='1-1'>基本设置</el-menu-item>
                <el-menu-item index='1-2'>banner管理</el-menu-item>
                <el-menu-item index='1-3'>导航管理</el-menu-item>
              </el-submenu>

              <el-submenu index='2'>
                <template slot='title'>
                  <i class='el-icon-tickets'></i>
                  <span>课程管理</span>
                </template>
                <el-menu-item index='2-1'>课程内容</el-menu-item>
                <el-menu-item index='2-2'>章节管理</el-menu-item>
                <el-menu-item index='2-3' @click='goTo("/VideoManage")'>视频添加</el-menu-item>
                <el-menu-item index='2-4'>课程分类</el-menu-item>
              </el-submenu>

              <el-submenu index='3'>
                <template slot='title'>
                  <i class='el-icon-s-custom'></i>
                  <span>用户管理</span>
                </template>
                <el-menu-item index='3-1'>用户列表</el-menu-item>
              </el-submenu>
              <el-submenu index='4'>
                <template slot='title'>
                  <i class='el-icon-wallet'></i>
                  <span>财务管理</span>
                </template>
                <el-menu-item index='4-1'>订单列表</el-menu-item>
              </el-submenu>
              <el-submenu index='5'>
                <template slot='title'>
                  <i class='el-icon-chat-dot-square'></i>
                  <span>评论管理</span>
                </template>
                <el-menu-item index='5-1'>评论列表</el-menu-item>
              </el-submenu>
              <el-submenu index='6'>
                <template slot='title'>
                  <i class='el-icon-s-tools'></i>
                  <span>权限管理</span>
                </template>
                <el-menu-item index='6-1'>管理员列表</el-menu-item>
                <el-menu-item index='6-2'>角色组</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
        <!-- 菜单导航的结束 -->
      </el-aside>
      <el-container class='app-container-main'>
        <el-header>
          <!-- 头部导航的开始 -->
          <el-menu
            class='app-container-main-top'
            mode='horizontal'
            background-color='#ffffff'
            text-color='#fff'
            active-text-color='#ffd04b'
          ></el-menu>
          <!-- 头部导航的结束 -->
        </el-header>
        <el-main>
          <!-- 主内容开始 -->
          <router-view></router-view>
          <!-- 主内容结束 -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  methods:{
    goTo:function(path){
      this.$router.push({
        path:path
      })
    }
  }
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,
body,
#app,
.app-container {
  height: 100%;
}

#app .app-container-aside {
  background: #343a40;
  width: 250px;
  overflow: hidden;
}
.app-container-aside .title {
  font-size: 18px;
  color: #fff;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.el-menu {
  border-right-width: 0 !important;
}
.app-container-main .el-header {
  padding: 0;
}
.app-container-main-top {
  height: 66px;
}
</style>
